<template>
	<!-- 找活大厅 -->
	<!-- <view>
		<u-card v-for="(item,index) in list" :key='index' :title="item.title" :sub-title="item.createtime" >
			<view class="card_view" slot="body">
				<view><text class="titlee">土地面积</text>：{{item.mianji}}</view>
				<view><text class="titlee">单价</text>：{{item.price}}</view>
				<view><text class="titlee">共计费用</text>：{{item.money}}</view>
				<view><text class="titlee">定金</text>：{{item.ding_money}}</view>
				<view><text class="titlee">尾款</text>：{{item.wei_money}}</view>
				<view><text class="titlee">耕作要求</text>：{{item.yaoqiu}}</view>
				<view><text class="titlee" @click="call(item.phone)">联系方式</text>：{{item.phone}}
					<u-icon name="phone-fill" color="#2979ff" size="32"></u-icon>
				</view>
				<view @click="goAddress(item.address)"><text class="titlee">地址</text>：{{item.address}}
					<u-icon name="map-fill" color="#2979ff" size="32"></u-icon>
				</view>
			</view>
			<view class="" slot="foot">
				<button class="btn" @click="qiang(item.id)">抢单</button>
			</view>
			</u-card>
		
	</view> -->
	<view class="body">
		<view>
			<!-- 顶部区域 -->
			<view class="dating_top">
				<view class="">
				<!-- 顶部选择地区与搜索栏 -->
					<view class="top_font">
						<view style="display: flex;" @click="selectAddress()">
							<view>{{address}}</view>
							<u-icon name="arrow-down"></u-icon>
						</view>
						<u-search v-model="keyword" shape="square" :clearabled="true" :action-style="actionStyle" @search="search()" @custom="search()"></u-search>
					</view>
					<!-- 顶部选择地区与搜索栏—— -->
					<!-- 顶部图片 -->
					<view class="top_img">
							<image :src="njs_image" mode="" style="width: 300rpx; height: 180rpx;border-radius: 30rpx;" @click="njsClick()"></image>
							<image :src="nh_image" mode="" style="width: 300rpx; height: 180rpx;border-radius: 30rpx;"  @click="goUrl('/pages/index/xuqiu')"></image>
					</view>
					<!-- 顶部图片—— -->
					<!-- 顶部滑动栏 -->
					<!-- <view>
						全部---------------------------------------------------
					</view> -->
					<!-- 顶部滑动栏—— -->
				</view>
			</view>
			<!-- 顶部区域—— -->
			<u-tabs :list="tabList" :is-scroll="true" :current="current" @change="change"></u-tabs>
			<!-- 内容区域 -->
			<view class="dating_body">
				<view v-if="list.length>0" class="dating_bd" v-for="(item,index) in list" :key="index" @click="see(item.id)">
					<view class="dating_bd_font">
						<text style="font-size: 34rpx;font-weight: 700;">{{item.title}}</text>
						<text style="color:#4bbb89">{{item.price}}元/亩</text>
						<text>{{item.user_name}}:{{item.phone}}</text>
						<view class="">
							<text>土地面积：{{item.mianji}}亩</text>
						</view>
					</view>
					<view class="dating_bd_btm">
						<text class="dating_btm_ys">{{item.address}}</text>
						<view class="bd_btm">查看</view>
					</view>
				</view>
				<view v-if="list.length<=0" style="text-align: center; color:#bcbcbc;margin-top: 30rpx;">暂无更多数据</view>
			</view>
			<!-- 内容区域—— -->
			<view v-if="showSelect" style="position: absolute;top: 0;background-color: #fff;width: 100%;">
				<selectAddress v-if="showSelect" ref="selAddress" @select="selectAddress2"></selectAddress>
			</view>
		</view>
		<shopro-tabbar></shopro-tabbar>
	</view>
	
	
	
</template>

<script>
	import selectAddress from '@/components/select_address';
	export default {
		components:{
			selectAddress
		},
		data() {
			return {
				actionStyle:{
					color:'#fff'
				},
				tabList: [{
					name: '全部'
				}, {
					name: '耕地'
				}, {
					name: '播种',
				},
				{
					name: '飞防',
				},
				{
					name: '收割',
				},
				{
					name: '其他',
				}],
				types:'全部',
				current: 0,
				showSelect:false,
				address:'',
				positionInfo:{
					longitude:'',
					latitude:'',
					address:''
				},
				page:1,
				limit:10,
				total:0,
				list:[],
				njs_image:'',
				nh_image:'',
				keyword:'',
			}
		},
		onLoad() {
			var _this = this;
			_this.$http('apply.backgroundImage',{}).then(res=>{
				_this.njs_image = res.data.njs_image;
				_this.nh_image = res.data.nh_image;
			});
		},
		onShow() {
			this.page = 1;
			this.list = [];
			this.getCurrentLocation();
			this.getList(1);
		},
		onReachBottom() {
			if(this.list.length<this.total){
				this.getList()
			}
		},
		methods: {
			//切换标签
			change(index) {
				this.current = index;
				this.page = 1;
				this.types=this.tabList[index].name
				this.list = [];
				this.getList();
			},
			njsClick(){
				uni.showToast({
					title:'当前为农机手端',
					icon:'none'
				})
			},
			goUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			search(){
				this.page = 1;
				this.list = [];
				this.getList();
			},
			getList(num){
				var _this = this;
				_this.$http('apply.dating',{
					page:num?num:_this.page,
					limit:_this.limit,
					types:_this.types,
					keyword:_this.keyword,
					address:_this.address,
				}).then(res=>{
					if(res.code == 1){
						_this.list = _this.list.concat(res.data.list);
						_this.total = res.data.total;
						_this.page++;
					}else{
						uni.showModal({
							title:'提示',
							content:res.msg,
							success(ret){
								if(ret.confirm){
									uni.navigateTo({
										url:'/pages/index/njs_apply'
									})
								}
								if(ret.cancel){
									uni.switchTab({
										url:'/pages/index/view'
									})
								}
							}
						})
					
					}
					
				})
			},
			
			//查看
			see(id){
				uni.navigateTo({
					url:'/pages/index/work_detail?work_id='+id
				})
			},
			selectAddress(){
				if(this.showSelect==true){
					this.showSelect = false;
				}else{
					this.showSelect = true;
				}
			},
			selectAddress2(data){
				this.showSelect = false;
				this.address = data;
				this.page = 1;
				this.list = [];
				this.getList();
			},
			// 通过自带的方法获取到当前的经纬度，调用方法获取到地址获取到地址的中文信息
			getCurrentLocation() {
				let that = this //在uniapp中药定义一下this才能使用
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log(res)
						that.positionInfo.longitude = res.longitude;
						that.positionInfo.latitude = res.latitude;
						that.loAcquire(that.positionInfo.longitude,that.positionInfo.latitude)
					}
				});
			},
			// 获取当前地址
			loAcquire(longitude, latitude) {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				var key = 'ULIBZ-LTS3J-HMRFZ-KFRPH-W2E4S-BFFKQ';
				let str = `key=`+key+`&location=`+latitude+`,`+longitude //记得在这里要输入密钥哦！
				uni.request({
					url:'https://apis.map.qq.com/ws/geocoder/v1/?' + str,
					success(res){
						console.log(res);
						uni.hideLoading()
						console.log(res.data.result.address_component.city);
						if (res.statusCode == 200) {
							that.address = res.data.result.address_component.city;
							// that.positionInfo.address = '当前位置是:' + res.result.address_component.city; //当前定位
						}
					},
					fail(error) {
						uni.hideLoading()
						that.address = '';
						console.log(error);
					}
				})
			},
			
			//抢单
			// qiang(id){
			// 	var _this = this;
			// 	_this.$http('apply.njs_jiehuo',{
			// 		work_id:id
			// 	}).then(res=>{
			// 		if(res.code == 1){
			// 			uni.showModal({
			// 				title:'提示',
			// 				content:'接单成功',
			// 				success(){
			// 					_this.page =1;
			// 					_this.list = [];
			// 					_this.getList(1)
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			// goAddress(address){
			// 	uni.request({
			// 		url:'https://apis.map.qq.com/ws/geocoder/v1/?address='+address+'&key=ULIBZ-LTS3J-HMRFZ-KFRPH-W2E4S-BFFKQ',
			// 		success(res){
			// 			console.log(res);
			// 			uni.openLocation({
			// 				latitude:res.data.result.location.lat,
			// 				longitude:res.data.result.location.lng,
			// 				success(ret){
								
			// 				}
							
			// 			})
			// 		}
			// 	})
			// },
			// call(mobile){
			// 	uni.makePhoneCall({
			// 		phoneNumber:mobile
			// 	})
			// }
		}
	}
</script>

<style>
	/* .titlee{
		width: 150rpx;
		display: inline-block;
		text-align: justify;
		font-weight: bold;
		text-align-last:justify;
	}
	.card_view view{
		margin: 10rpx 0;
	}
	.btn{
		background-color: #388E3C;
		color: #fff;
	} */
	.body {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
	.dating_top {
		/* linear-gradient(180deg, #E03325 0%, #E03325 52%, rgba(229, 73, 73, 0) 100%); */
		width: 100%;
	    height: 350rpx;
		background-color: #59c39b;
		 background: linear-gradient(#4bbb89, #ffffff);
		padding: 0 40rpx;
	}
	.top_font {
		display: flex;
		justify-content: space-between;
		height: 64rpx;
		line-height: 64rpx;
		color:#fff;
	}
	.top_img {
		margin: 20rpx 0;
		display: flex;
		justify-content: space-between
	}
	.top_imges{
		/* background: url(/static/images/ceshi.png) no-repeat center/cover; */
		height: 200rpx;
		width: 300rpx;
		border-radius: 10%;
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: column;
	}
	.top_size {
		flex:1; 
		margin-bottom: 10rpx;
		font-size: 32rpx;
		font-weight:600;
	}
	.dating_body {
		padding: 0 40rpx;
		margin-top: 20rpx;
	}
	.dating_bd {
		height: 170px;
		padding: 40rpx 0;
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #ececec;
	}
	.dating_bd_font {
		display: flex;
		flex-direction: column;
		justify-content: center;
		line-height: 60rpx;
	}
	.dating_btm_ys {
		color: #9f9f9f;
		font-size: 24rpx;
	}
	.dating_bd_btm {
		width: 250rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
	}
	
	.bd_btm {
		background-color: #4bbb89;
		border-radius: 10rpx;
		width: 180rpx;
		height: 65rpx;
		line-height: 65rpx;
		color: #fff;
		text-align: center;
		margin-left: auto;
	}
</style>
